<template>
  <view>
    <u-checkbox-group v-model="checkValue" :placement="placement" @change="change">
      <u-checkbox
        v-for="(item, index) in list"
        :key="index"
        :label="item[props.label]"
        :name="item[props.value]"
        style="margin-left: 15px"
      />
    </u-checkbox-group>
  </view>
</template>

<script>
export default {
  name: 'CheckBox',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    placement: {
      type: String,
      default: 'row'
    },
    props: {
      type: Object,
      default() {
        return { value: 'value', label: 'label' }
      }
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      checkValue: []
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(val) {
        this.checkValue = []
        if (val === undefined || val === '') {
          return
        }
        this.checkValue = val.split(',').filter(item => {
          return item !== ''
        })
      }
    }
  },
  methods: {
    change(val) {
      console.log(val)
      this.$emit('update:modelValue', val.join(','))
    }

  }

}
</script>

<style scoped>

</style>
